<script setup>
import { ref } from 'vue'
import { Overlay, Field, Form, showLoadingToast } from 'vant'
import UploadFile from '@/components/uploadFile/index.vue'
import { amountValidator } from '@/utils/validator.js'
import cgToast from '@/components/toast/index.js'
import commonModel from '@/http/modules/common.js'
const emits = defineEmits(['refresh'])
const show = ref(false)
defineExpose({ show })
const RefForm = ref()
const RefHTFile = ref()
const RefCIFile = ref()
const props = defineProps({
  contractDetail: {
    type: Object,
    default: () => ({ contractInfo: {} }),
  },
})
const updateForm = ref({
  totalOrderAmount: '',
})
const validatorMessage = (val) => {
  return props.contractDetail.contractInfo.totalOrderAmount <= val
}
function handleToSubmit() {
  RefForm.value.submit()
}
async function onSubmit() {
  let loading = null
  try {
    loading = showLoadingToast({
      duration: 0,
      message: '正在提交...',
      forbidClick: true,
    })
    const htFileList = RefHTFile.value.fileList || []
    const ciFileList = RefCIFile.value.fileList || []
    await commonModel.gatewayApi({
      service: 'cb_trade_modify_amount',
      bizContent: {
        contractOrderNo: props.contractDetail.contractOrderNo,
        source: sessionStorage.source,
        ciPiUrls: ciFileList.join(','),
        contractUrls: htFileList.join(','),
        totalOrderAmount: updateForm.value.totalOrderAmount,
      },
      version: '1.0.0',
    })
    show.value = false
    cgToast.open({
      title: '提交成功',
      showCancel: false,
      confirmText: '确定',
      confirmFun: () => {
        cgToast.close()
      },
    })
    emits('refresh')
  } catch (e) {
    console.log(e)
  } finally {
    loading && loading.close()
  }
}
</script>
<template>
  <div class="change__amount">
    <Overlay :show="show" z-index="99" lock-scroll @click="show = false">
      <div class="change__amount-wrapper" @click.stop>
        <Form
          @submit="onSubmit"
          label-width="7em"
          ref="RefForm"
          error-message-align="right"
        >
        <div class="change-amount-title" :style="{color:'#333',textAlign:'center',fontWeight:'700',marginBottom:'0.15rem'}">变更金额</div>
          <Field
            v-model="updateForm.totalOrderAmount"
            name="totalOrderAmount"
            placeholder="请输入金额"
            :rules="[
              { required: true, message: '请输入金额' },
              {
                validator: amountValidator,
                message: '只支持数字和小数点，只支持小数点后两位',
              },
              {
                validator: validatorMessage,
                message: '变更后金额不可低于原金额',
              },
            ]"
          >
            <template v-slot:right-icon>
              {{ contractDetail.contractInfo.currency }}
            </template>
          </Field>
        </Form>
        <upload-file
          title="合同"
          :delete="false"
          ref="RefHTFile"
          :is-upload-file="contractDetail.contractInfo.contractUrls"
        />
        <div class="line" />
        <upload-file
          title="CI/PI"
          ref="RefCIFile"
          :delete="false"
          :is-upload-file="contractDetail.contractInfo.ciPiUrls"
        />
        <div class="footer__wrapper">
          <div class="btn rest" @click="show = false">取消</div>
          <div class="btn submit" @click="handleToSubmit">确认</div>
        </div>
      </div>
    </Overlay>
  </div>
</template>

<style lang="scss" scoped>
.change__amount-wrapper {
  width: calc(100% - 50px);
  margin-left: 25px;
  background: #ffffff;
  border-radius: 8px;
  padding: 15px;
  .footer__wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    .btn {
      width: 135px;
      height: 40px;
      background: #3f84f3;
      border-radius: 20px;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      line-height: 40px;
      &.rest {
        color: #666666;
        background: #f4f4f4;
        margin-right: 15px;
      }
    }
  }
}
:deep {
  .van-overlay {
    display: flex;
    align-items: center;
    .van-cell {
      padding: 0;
      .van-field__body {
        height: 36px;
        border-radius: 4px;
        border: 1px solid #cccccc;
        padding: 5px;
      }
    }
  }
}
</style>
